<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>


    <div>
      <el-card class="box-card">

        <div align="center" class="d1" style="color: mediumblue">
          <div style="float: right">
            <el-button type="text" @click="">导入</el-button>
            <el-button type="text" @click="">导出</el-button>
          </div>
          <h3>订单管理界面</h3>
        </div>
        <div class="d2">
          <el-form :model="searchForm" class="d2">
            <el-row :gutter="20">
              <el-form-item>
                <el-col :span="5">
                  <el-input placeholder="订单编号" v-model="searchForm.code"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-input placeholder="客户名称" v-model="searchForm.customerName"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-select v-model="searchForm.state" placeholder="请选择">
                    <el-option label="未提交" value="0"></el-option>
                    <el-option label="已提交" value="1"></el-option>
                    <el-option label="已工艺" value="2"></el-option>
                    <el-option label="已报价" value="3"></el-option>
                    <el-option label="已支付" value="4"></el-option>
                    <el-option label="已转合同" value="5"></el-option>
                    <el-option label="已关闭" value="6"></el-option>
                  </el-select>
                </el-col>

                <div style="float: right">
                  <el-button @click="searchOrder" plain type="info">搜索</el-button>
                  <el-button @click="addOrder" type="primary">添加订单</el-button>
                </div>
              </el-form-item>
            </el-row>
          </el-form>
        </div>

        <el-table
          :data="orderList"
          stripe
          style="width: 100%">
          <el-table-column
            type="index">
          </el-table-column>
          <el-table-column
            prop="code"
            label="订单编号">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="客户">
          </el-table-column>
          <el-table-column
            prop="taxRate"
            label="税率">
          </el-table-column>
          <el-table-column
            prop="linkmanName"
            label="联系人">
          </el-table-column>
          <el-table-column
            prop="linkmanTel"
            label="联系人电话">
          </el-table-column>
          <el-table-column
            label="创建时间">
            <template slot-scope="scope">
              {{scope.row.createDate | datefmt}}
            </template>
          </el-table-column>
          <el-table-column
            label="更新时间">
            <template slot-scope="scope">
              {{scope.row.updateDate | datefmt}}
            </template>
          </el-table-column>
          <el-table-column
            label="订单状态">
            <template slot-scope="scope">
              {{scope.row.state | sFit}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-col :span="12">
                <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <div>
                      <el-button @click="tjOrder(scope.row.id)" v-if="scope.row.state==0" plain>提交</el-button>
                    </div>

                    <div>
                      <el-button @click="offerOrder(scope.row.id)" v-if="scope.row.state==2" plain>已报价</el-button>
                    </div>
                    <div>
                      <el-button @click="exportExcel(scope.row.id)" v-if="scope.row.state==2" plain>导出报价单</el-button>
                    </div>
                    <div>
                      <el-button  @click="trueOrder(scope.row.id)" v-if="scope.row.state==4" plain>转合同</el-button>
                    </div>
                    <div>
                      <el-button @click="delitalOrder(scope.row.id)" plain>查看</el-button>
                    </div>
                    <div>
                      <el-button @click="orderRecord(scope.row.id)" plain>订单记录</el-button>
                    </div>
                    <div>
                      <el-button @click="closeOrder(scope.row.id)" plain>订单关闭</el-button>
                    </div>
                    <div>
                      <el-button @click="delOrder(scope.row.id)" v-if="scope.row.state==6" plain>删除</el-button>
                    </div>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.pagenum"
          :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 40]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-card>
      <div>
        <el-dialog :close-on-click-modal="false" :visible.sync="orderRecordVisible">
          <el-table
            :data="orderRecordList"
            style="width: 100%">
            <el-table-column
              prop="userName"
              label="操作人姓名"
              width="180">
            </el-table-column>
            <el-table-column
              label="操作订单时间">
              <template slot-scope="scope">
                {{scope.row.updatetime | datefmt}}
              </template>
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="操作说明">
            </el-table-column>
          </el-table>
          <div class="dialog-footer" slot="footer">
            <el-button @click="orderRecordVisible = false">取 消</el-button>
          </div>

        </el-dialog>
      </div>
      <div>
        <el-dialog title="订单明细" :visible.sync="dialogFormVisible">
          <el-form :model="orderAndItem.piOrder">
            <el-row :gutter="22">
              <el-col :span="11">
                <el-form-item label="订单编号" :label-width="formLabelWidth">
                  <el-input v-model="orderAndItem.piOrder.code" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="联系人" :label-width="formLabelWidth">
                  <el-input v-model="orderAndItem.piOrder.linkmanName" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="税率(%)" :label-width="formLabelWidth">
                  <el-input v-model="orderAndItem.piOrder.taxRate" autocomplete="off" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="客户" :label-width="formLabelWidth">
                  <el-input v-model="orderAndItem.piOrder.customerName" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="手机" :label-width="formLabelWidth">
                  <el-input v-model="orderAndItem.piOrder.linkmanTel" autocomplete="off" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div>
            <el-table
              stripe
              :data="orderAndItem.piOrderItems"
              height="250"
              border
              style="width: 100%">
              <el-table-column
                type="index">
              </el-table-column>
              <el-table-column
                label="编号">
                <template slot-scope="scope">
                  <el-link type="primary" :href="'http://localhost:8080/order/pi-order-pic/download/'+scope.row.code+'/'+orderAndItem.piOrder.code" target="_blank">{{scope.row.code}}</el-link>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="num"
                label="数量">
              </el-table-column>
            </el-table>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "OrderList",
    data() {
      return {
        orderRecordVisible:false,
        orderRecordList:[],
        user0: {},
        searchForm: {},
        dialogFormVisible: false,
        formLabelWidth: "120px",
        orderList: [],
        page: {
          pagenum: 0,
          pagesize: 5
        },
        linkMan:[],
        options:[],
        total: 0,
        orderAndItem: {
          piOrder: {
            linkmanTel: '',
            taxRate: ''
          },
          piOrderItems: [],
        },
      }
    },
    methods: {
      searchOrder: function () {//用户列表
        // debugger
        // this.searchForm.tbId=this.user0.id
        this.$http.post("/order/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
          this.orderList = res.data.result.list;
          this.total = res.data.result.total;
        });
      },
      addOrder: function () {
        this.$router.push('/addOrder')
      },
      handleSizeChange: function (val) {
        this.page.pagesize = val;
        this.searchOrder();
      },
      handleCurrentChange: function (val) {
        this.page.pagenum = val;
        this.searchOrder();
      },
      tjOrder: function (id) {
        this.$http.post("/order/tjOrder/" + id,this.user0).then((res) => {
          if (res.data.success) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.searchOrder();
        })
      },
      closeOrder: function (id) {
        this.$http.post("/order/closeOrder/" + id,this.user0).then((res) => {
          if (res.data.success) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.searchOrder();
        })
      },
      delOrder: function (id) {
        this.$http.post("/order/delOrder/" + id,this.user0).then((res) => {
          if (res.data.success) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.searchOrder();
        })
      },
      offerOrder: function (id) {
        this.$http.post("/order/offerOrder/" + id,this.user0).then((res) => {
          if (res.data.success) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.searchOrder();
        })
      },
      trueOrder: function (id) {
        this.$http.post("/order/trueOrder/" + id,this.user0).then((res) => {
          if (res.data.success) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.searchOrder();
        })
      },
      delitalOrder(id) {
        this.dialogFormVisible=true
        this.$http.get("/order/addOrder/delitalOrder/" + id).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message)
            this.orderAndItem.piOrder = res.data.result.piOrder
            this.orderAndItem.piOrderItems = res.data.result.piOrderItems
          } else {
            this.$message.error(res.data.message);
          }
          this.searchOrder();
        })
      },
      orderRecord:function (id) {
        this.$http.get("/order/orderRecord/" + id).then((res) => {
          this.orderRecordList=res.data.result
          console.log(this.orderRecordList)
          if (res.data.success) {
            this.orderRecordVisible=true
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }

        })
      },
      exportExcel:function (id) {
        location.href="http://localhost:8080/order/exportExcel/"+id;
      }
    },
    mounted() {
      this.searchOrder();
      this.user0 = JSON.parse(sessionStorage.getItem("user"))
    },
    filters: {
      sFit: function (val) {
        if (val == 0) {
          return "未提交"
        }
        if (val == 1) {
          return "已提交"
        }
        if (val == 2) {
          return "已工艺"
        }
        if (val == 3) {
          return "已报价"
        }
        if (val == 4) {
          return "已支付"
        }
        if (val == 5) {
          return "已转合同"
        }
        if (val == 6) {
          return "已关闭"
        }
      }
    }
  }
</script>

<style scoped>
  .el-pagination {
    text-align: center;
  }

  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }
</style>
